import { useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import api from "../request";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import PaginationBar from "../Component/PaginationBar";
import { Loading, LoadingContent, LoadingSkeleton } from "../Component/Loading";
import { Placeholder } from "react-bootstrap";

const PAGE_SIZE = 20;

function TagsPage() {
    let [searchParams, setSearchParams] = useSearchParams();
    const [tags, setTags] = useState(null);
    const [currentPage, setCurrentPage] = useState(0);
    const [totalPages, setTotalPages] = useState(0);

    useEffect(() => {
        let page = searchParams.get('page') ? parseInt(searchParams.get('page')) : 0;
        api.listTags({
            page: page,
            size: PAGE_SIZE
        }, (err, data, _) => {
            if (err) throw err;
            setTags(data.data.list);
            setTotalPages(data.data.totalPage);
            setCurrentPage(page);
        });
    }, [searchParams]);

    function gotoPage(page) {
        setSearchParams({ page: page });
        window.scrollTo(0, 0);
    }

    return (
        <Container>
            <h1>标签</h1>
            <Loading loaded={tags}>
                <LoadingContent>
                    <ul>
                        {tags?.map(tag => (
                            <li key={tag.id} style={{ listStyle: 'none' }}>
                                <Link
                                    to={`/tag/${tag.id}`}
                                    className="fs-4 text-bold ff-songti-title"
                                >
                                    {tag.name}
                                </Link>
                            </li>
                        ))}
                    </ul>
                    
                    <br />
                    <PaginationBar
                        currentPage={currentPage}
                        totalPages={totalPages}
                        gotoPageCallback={gotoPage}
                    />
                </LoadingContent>
                <LoadingSkeleton>
                <br />
                    <Placeholder as="div" animation="wave">
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                        <div className="mb-3">
                            <Placeholder as="h2" xs={4}></Placeholder>
                            <Placeholder as="span" className="ms-3" xs={1}></Placeholder>
                        </div>
                    </Placeholder>
                </LoadingSkeleton>
            </Loading>
        </Container>
    );
}

export default TagsPage;